import $ from "jquery";
export default defineContentScript({
  matches: ["https://fanyi.baidu.com/*"],
  main() {
    window.onload = () => {
      // 转驼峰
      function transformText(type: string) {
        $("#trans-selection").find(".transform_result").remove();
        $("#trans-selection")
          .find(".sentId")
          .each((index: number, item: Element) => {
            var text = $(item).text();
            console.log("🚀 ==> text:", text);
            var list = text.split(" ");
            var tempArr: string[] = [];
            list.forEach((item: string, index: number) => {
              switch (type) {
                case "upperCase":
                  tempArr.push(item.toUpperCase());
                  break;
                case "lowercase":
                  tempArr.push(item.toLowerCase());
                  break;
                case "bigHump":
                  tempArr.push(
                    item.charAt(0).toUpperCase() + item.toLowerCase().slice(1)
                  );
                  break;
                case "smallHump":
                  if (index == 0) {
                    tempArr.push(
                      item.charAt(0).toLowerCase() + item.toLowerCase().slice(1)
                    );
                  } else {
                    tempArr.push(
                      item.charAt(0).toUpperCase() + item.toLowerCase().slice(1)
                    );
                  }
                  break;
                default:
                  break;
              }
            });
            var result: string = "";
            switch (type) {
              case "upperCase":
              case "lowercase":
                result = tempArr.join("_");
                break;
              case "bigHump":
              case "smallHump":
                result = tempArr.join("");
                break;
              default:
                break;
            }
            function copyText() {
              console.log("result", result);
              navigator.clipboard.writeText(result);
            }
            $(item).after(
              `<div class="transform_result"><small style="color: #409EFF;">${result}</small>
              <button style="font-size: 12px;cursor: pointer;" id="copyText${index}">复制</button></div>`
            );
            $(`#copyText${index}`).on("click", function () {
              $(this).text("已复制");
              setTimeout(() => {
                $(this).text("复制");
              }, 2e3);
              copyText();
            });
          });
      }
      setTimeout(() => {
        var buttons = $(
          `<div style="display: inline-flex;gap:8px;">
            <button style="background: #409EFF;color: #fff;border: none;cursor: pointer;" id="upperCase">大写</button>
            <button style="background: #409EFF;color: #fff;border: none;cursor: pointer;" id="lowercase">小写</button>
            <button style="background: #409EFF;color: #fff;border: none;cursor: pointer;" id="bigHump">大驼峰</button>
            <button style="background: #409EFF;color: #fff;border: none;cursor: pointer;" id="smallHump">小驼峰</button>
          </div>`
        );
        $(".b15UFYYv").append(buttons);
        $("#upperCase").on("click", () => {
          transformText("upperCase");
        });
        $("#lowercase").on("click", () => {
          transformText("lowercase");
        });
        $("#bigHump").on("click", () => {
          transformText("bigHump");
        });
        $("#smallHump").on("click", () => {
          transformText("smallHump");
        });
      }, 0);
    };
  },
});
